<template>
  <div class='home'>
      <!-- banner -->
      <swiper autoplay indicator-dots='true' indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="white" >
        <swiper-item v-for="(value,index) in imgList" :key="index" @click="toGoodsDetailorGame(value)">
          <img :src="value.img_url" class="slide-image" lazy-load="true" mode="aspectFill"/>
        </swiper-item> 
      </swiper>
      <!-- banner结束 -->
    <!-- 导航栏 -->
  <div class="nav">
    <div v-for="(item,index) of classify" :key="index" @click="toAdvert(item.link_url)">
      <img :src="item.img_url" alt="" mode="aspectFill">
      <!-- <div>{{item.name}}</div> -->
    </div>
  </div>
   <div class="home_content">
     <!-- <div class="couponList">
        <img mode="aspectFill" :src="item.img_url" alt="" v-for="(item,index) of couponList" :key="index" @click="tohomeCoupon(item.id)">
      </div> -->
      <div class="coupon"  v-for="(item,index) of advert2" :key="index">

         <img :src="item.img_url" @click='toAdvert(item.link_url)' mode="widthFix" lazy-load="true" >
        </div>
      </div>
      <!-- 广告区 -->
      <div class="advert">
        <div class="advert_item" v-for="(item,index) of advert" :key="index">
          <img :src="item.img_url" @click='toAdvert(item.link_url)' mode="widthFix" lazy-load="true">
        </div>
      </div>
      <!-- 广告区结束 -->

       <!-- 爆款广告区 -->
      <div class="advert advert1">
        <div class="navBar" style="width:100%">{{advert1Name}}</div>
        <img :src="item.img_url" @click='toAdvert(item.link_url)' mode="widthFix" lazy-load="true" v-for="(item,index) of advert1" :key="index">
      </div>
      <!-- 爆款广告区结束 -->

      <!-- 限时特惠区 -->
    <!-- <div class="special">
      <div class="special_item" v-for="(value,index) in newData" :key="index" @click="toGoodsDetail(value.id)">
        <div class="special_item_left">
          <img :src="value.thumb_Url" class="special_item_pic" mode="aspectFill" lazy-load="true">
          <div class="special_item_name">{{value.name}}</div>
        </div>
        <div class="special_item_right">
          <div class="special_item_from">美国原装进口</div>
          <div class="special_item_from">{{value.name}}</div>
          <div class="special_item_des">{{value.info}}</div>
          <div class="special_item_price">到手价:￥{{value.s_price}}</div>
        </div>
      </div>
    </div> -->
    <!-- 限时特惠区结束 -->

    <!-- 推荐商品区 -->
    <div class="introduce">
      <div class="navBar" style="width:100%;padding-left:10px">{{goodsListName}}</div>
      <div class="introduce_item" v-for="(value,index) in recommendData" :key="index" @click="toGoodsDetail(value.id)">
        <img :src="value.thumb_Url" alt="" class="introduce_item_pic" mode="aspectFill" :lazy-load="true">
        <div class="introduce_item_name">
          <div>{{value.name}}</div> 
          <div>￥{{value.s_price}}</div>
        </div>
      </div>
    </div>
    <!-- 推荐商品区结束 -->


   </div>
</template>

<script>


export default {
  data() {
    return {
      newData:[],
      recommendData:[],
      goodsListName:'',//商品列的标题名
      advert1Name:'',//商品列的标题吗
      advert:'',//普通广告
      advert1:'',//爆款广告
      advert2:'',//积分商城
      imgList:'',
      page:0,
      classify:'',
      couponList:'',
      
    }
  },


  methods:{
    async getGoodList(){
      wx.showLoading()
      let res=await this.$request.getData('/goods/getGoodsList',{page:0,limit:10,type:'common'})
      if(res.data.level=='success'){
          this.goodsListName=res.data.show_goods
          res.data.data.forEach((item)=>{
            if(item.is_recommend=='1'){
              this.recommendData.push(item)
            }
        })
        wx.hideLoading()
      }
    },
    async getCoupon(){//获取首页优惠券
      let res=await this.$request.getData('/ucenter/getHomeCoupon')
      if(res.data.level=='success'){
        this.couponList=res.data.data
      }
    },
    async getAdvert(){//获取普通广告
      let res=await this.$request.getData('/other/getAdvertImg')
      if(res.data.level=='success'){
        this.advert=res.data.data
      }
    },
    async getAdvert1(){//获取普通广告
      let res=await this.$request.getData('/other/getAdvertImg',{type:'indulgence'})
      if(res.data.level=='success'){
        this.advert1=res.data.data
        this.advert1Name=res.data.show_goods
      }
    },
     async getAdvert2(){//获取积分广告模块
      let res=await this.$request.getData('/other/getAdvertImg',{type:'integral'})
      if(res.data.level=='success'){
        this.advert2=res.data.data
      }
    },
    async getBanner(){
      let res=await this.$request.getData('/other/getBannerList');
      if(res.data.level=='success'){
        this.imgList=res.data.data;
        wx.stopPullDownRefresh()
      }
    },
    async getClassify(){
      let res=await this.$request.getData('/other/getBannerNavList');
      if(res.data.level=="success"){
        this.classify=res.data.data
      }
    },
    
    toGoodsDetailorGame(val){
      if(val.app_id){//跳转小游戏
        wx.navigateToMiniProgram({
        appId: 'wxf9f00414b59cdc29',
        path: '/pages/contentHome/main',
        // extraData: {
        //   foo: 'bar'
        // },
        envVersion: 'release',
        success(res) {
          // 打开成功
          console.log('成功打开')
        }
      })
      }else{
        const url=val.link_url
        let pattern=/^\/pages/
        console.log(url,777)
        if(pattern.exec(url)){
          this.$currency.navigateTo(url)
        }else{
          wx.navigateTo({url:'/pages/advert/main?url='+url})
        }
      }
    },
    toGoodsDetail(id){
      wx.navigateTo({url:'/pages/goodsDetail/main?id='+id})
    },
    tohomeCoupon(id){
      wx.navigateTo({url:'/pages/homeCoupon/main?id='+id})
    },
    toAdvert(url){
      let pattern=/^\/pages/
      if(pattern.exec(url)){
        this.$currency.navigateTo(url)
      }else{
        wx.navigateTo({url:'/pages/advert/main?url='+url})
      }
    },
    
  },
  onReachBottom(){
    this.page++;
  },
  onPullDownRefresh() {
    this.page=0;
    this.getBanner()
    this.getAdvert();
    this.getAdvert2();
    this.getAdvert1();
    this.getGoodList();
    this.newData=[]
    this.recommendData=[]
    // Do something when pull down.
  },
   onShareAppMessage(){
     return {
      title: '洽商会商城',
      desc:'洽商会商城',
    }
  },
  mounted() {
    this.newData=[]
    this.recommendData=[]
    this.getBanner();
    this.getCoupon();
    this.getAdvert();
    this.getAdvert2();
    this.getAdvert1();
    this.getGoodList();
    this.getClassify();    
  },
  onShow(){
    this.page=0
  },
}
</script>

<style scoped lang="scss">
  .home{
    width:100%;
    min-height: 100%;
    background:#eee;
  }
  swiper{height: 250px;}
.slide-image{width: 100%;height: 250px;}
.c_wrapper{
  display: flex;
  width:100%;
  margin-top:10px;
  background:#eee;
}

  /* 优惠券 */
  .coupon{
    flex:1;
    background:#fff;
    padding:5px 0;
  }
  .coupon> navigator{
    width: 100%;
    // height: 100%;
  }
  .coupon img{
    width:100%;
  }

  .advert img{
    width:100%;
    display:block;
  }
  .advert_item{
    background: #fff;
  }
  /* 特惠区 */
  .navBar{
    background: #fff;
    display: flex;
    margin-top:-10px;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    font-weight: bold;
  }
  .navBar img{
    width:20px;
    height: 20px;
  }
  .advert1{
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }
  .advert1 img{
    width:48%;
  }
  /* .special{
    margin-top:20px;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-around;
    align-content: space-around;
  }
  .special_item{
    display: flex;
    width:100%;
    align-items: center;
    font-size: 12px;
    margin-bottom:15px;
    margin-left:20px;
  }
  .special_item_left{
    display: flex;
    flex-direction:column;
    justify-items: center;
    align-items: center;
  }
  .special_item_right{
    height:100%;
    margin-left:30px;
    width:160px;
  }
  .special_item_right>div{
    width:100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .special_item_from{
    font-size: 15px;
    font-weight: bold;
    margin:20px 0;
  }
  .special_item_des{
    margin-bottom: 20px;
    color:gray
  }
  .special_item_price{
    color:red
  }
  .special_item_pic{
    width:120px;
    height:120px;
  }
  .special_item_name{
    font-size:10px;
  } */


  /* 推荐商品区 */
  .introduce{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top:20px;
    background: #eee;
  }
  .introduce_item{
    background: #fff;
    width:48%;
    height: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin-bottom:15px;
  }
  .introduce_item_pic{
    margin-top:5px;
    width:85%;
    height: 150px;
  }
  .introduce_item_name{
    margin-top:10px;
    width:85%;
    display:flex;
    flex-wrap: wrap;
    font-size: 14px;
    
  }
  .introduce_item_name>div:first-child{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .introduce_item_name>div:nth-child(2){
    width: 100%;
    margin-top:2px;
    color:red;
  }

  /* 导航栏 */
  .nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width:100%;
    padding:5px 0;
    background:#fff;
  }
  .nav>div{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .nav>div>img{
    width:90px;
    height: 50px;
    margin-bottom:5px;
    border-radius: 5px;
  }


  /* 优惠券列 */
  .couponList{
    // margin-top:10px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding:5px 0px;
  }
 .couponList img{
      width: 110px;
      height: 60px;
      border-radius: 5px;
    }


  
</style>
